<template>
    <view class="complex-camera">
        <video v-if="videoSrc" :src="videoSrc" style="width: 100vw; height:100vh;z-index: 9800;" autoplay="true" loop="true"
            :controls="false" object-fit="cover">
            <!-- 其它功能按钮，视频预览用 -->
            <cover-image :src="backIcon" class="complex-camera-back" @click="goBack"></cover-image>
            <cover-image :src="confirmIcon" class="complex-camera-previewer-success" @click="save"></cover-image>
        </video>
        <camera v-else device-position="back" @error="bindError" style="width: 100%; height:100vh;">
            <cover-view style="height:100vh;">
                <!-- 其它功能按钮 -->
                <cover-image :src="backIcon" class="complex-camera-back" @click="goBack"></cover-image>
                <cover-image :src="confirmIcon" class="complex-camera-previewer-success" v-if="photoSrc" @click="save">
                </cover-image>
                <!-- 预览 -->
                <cover-image :src="photoSrc" v-if="photoSrc" style="width: 100vw; height:100vh;z-index: 9800;" />
                <!-- 拍摄功能按钮 -->
                <cover-view v-if="!photoSrc"
                    :class="[recordStartTime == 0 ? 'complex-camera-btn-text' : 'complex-camera-btn-recording-text']">
                    {{ hintText }}
                </cover-view>
                <cover-image v-if="!photoSrc" :src="cameraIcon" @touchstart="handleTouchShutter"
                    @touchend="handleTouchShutter" @longpress="handleTouchShutter" class="complex-camera-btn" />
            </cover-view>
        </camera>
    </view>
</template>
  
<script>
let recorderManager = uni.getRecorderManager();
let innerAudioContext = uni.createInnerAudioContext('myAudio');
innerAudioContext.autoplay = true;
let cameraCtx; //相机上下文
export default {
    data() {
        return {
            dest: '', //上一页的目标data
            windowHeight: '',
            touchStartTime: 0,
            recordStartTime: 0, //开始录制时的时间戳
            photoSrc: '',
            videoSrc: '',
            backIcon: "",
            confirmIcon: "",
            cameraIcon: "",
        }
    },
    computed: {
        hintText() {
            if (this.recordStartTime === 0) {
                return "轻触拍照，长按录像";
            } else {
                return "录像中"
            }

        }
    },
    onLoad(e) {
        this.dest = e.dest;
        cameraCtx = uni.createCameraContext(); //初始化相机上下文
    },
    methods: {
        handleTouchShutter(e) {
            switch (e.type) {
                case "touchstart":
                    this.touchStartTime = e.timeStamp;
                    break;
                case "longpress":
                    this.recordStartTime = new Date().getTime();
                    //开始视频录制
                    this.takeVideo();
                    break;
                case "touchend":
                    const touchTime = e.timeStamp - this.touchStartTime; //单位ms
                    if (touchTime > 350 || this.recordStartTime != 0) {
                        //结束视频录制
                        uni.showLoading({
                            title: '保存中',
                            mask: true,
                            success: () => {
                                cameraCtx.stopRecord({
                                    // 视频压缩经常出问题
                                    // compressed: true,
                                    success: (res) => {
                                        this.stopRecordVideo(res);
                                    },
                                    complete: (res) => {
                                        uni.hideLoading();
                                    }
                                })
                            }
                        })
                    } else {
                        //拍照
                        this.takePhoto();
                    }
                    break;
            }
        },
        takePhoto() {
            this.photoSrc = "";
            this.videoSrc = "";
            cameraCtx.takePhoto({
                quality: 'low',
                success: (res) => {
                    let photoSrc = res.tempImagePath;
                    //图片压缩则交换注释
                    this.photoSrc = photoSrc;
                    // uni.compressImage({
                    //   src: photoSrc, // 图片路径
                    //   quality: 50, // 压缩质量
                    //   success: (response) => {
                    //     this.photoSrc = response.tempFilePath;
                    //   }
                    // })
                }
            });
        },
        takeVideo() {
            //开始录像
            this.photoSrc = "";
            this.videoSrc = "";
            cameraCtx.startRecord({
                timeoutCallback: (cb) => {
                    uni.showLoading({
                        title: '保存中',
                        mask: true,
                        success: (res) => {
                            this.stopRecordVideo(cb)
                        }
                    })
                },
                success: (res) => {
                    console.log("开始录像", new Date())
                },
                fail: (err) => {
                    console.log(err)
                },
            })
        },
        stopRecordVideo(res) {
            uni.hideLoading();
            this.recordStartTime = 0;
            const {
                tempThumbPath,
                tempVideoPath
            } = res;
            this.videoSrc = tempVideoPath;
        },
        goBack() {
            if (this.photoSrc || this.videoSrc) {
                this.photoSrc = "";
                this.videoSrc = "";
                this.touchStartTime = 0;
                this.recordStartTime = 0;
            } else {
                uni.navigateBack()
            }
        },
        save() {
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2];
            prevPage.$vm[this.dest] = this.videoSrc || this.photoSrc;
            if (this.btn) {
                prevPage.$vm[this.btn] = false;
            }
            uni.navigateBack();
        },
        bindError(e) {
            let _this = this;
            uni.showModal({
                title: '提示',
                content: '请允许摄像头授权',
                showCancel: false,
                success: function (res) {
                    if (res.confirm) {
                        uni.openSetting({
                            success(res) {
                                if (res.authSetting['scope.camera']) {
                                    uni.navigateBack()
                                }
                            }
                        })
                    }
                }
            });
        },
    },
    onUnload() {
        recorderManager = null;
        innerAudioContext = null;
        cameraCtx = null;
    }
}
</script>
<style>
page {
    padding-bottom: 0;
}
</style>
<style lang="scss" scoped>
$btn-bottom: 100rpx;

.complex-camera-btn-text {
    color: white;
    position: absolute;
    left: 260rpx;
    bottom: $btn-bottom+170rpx;
}

.complex-camera-btn-recording-text {
    color: red;
    position: absolute;
    left: 330rpx;
    bottom: $btn-bottom+170rpx;
}

.complex-camera-btn {
    z-index: 9000;
    position: absolute;
    width: 160rpx;
    height: 160rpx;
    left: 295rpx;
    bottom: $btn-bottom;
}

// 返回按钮
.complex-camera-back {
    position: absolute;
    left: 50rpx;
    bottom: $btn-bottom+56rpx;
    z-index: 9990;
    width: 48rpx;
    height: 48rpx;
}

//完成按钮
.complex-camera-previewer-success {
    position: absolute;
    right: 50rpx;
    bottom: $btn-bottom+56rpx;
    z-index: 9990;
    width: 48rpx;
    height: 48rpx;
}
</style>
  